﻿<div class="mt-10 mb-6 text-slate-700 font-semibold flex items-center">

    @if (PreviousTitle != null)
    {
        <a href="@PreviousLink" class="bg-gray-700 text-white rounded-l-md border-r border-gray-100 py-2 hover:bg-palette-main hover:text-white px-3">
            <div class="flex flex-row align-middle">
                <svg class="w-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd"></path>
                </svg>
                <span class="ml-2">@PreviousTitle</span>
            </div>
        </a>
    }

    @if (NextTitle != null)
    {
        <a href="@NextLink" class="ml-auto bg-gray-700 text-white rounded-r-md py-2 border-l border-gray-100 py-2 hover:bg-palette-main hover:text-white px-3">
            <div class="flex flex-row align-middle">
                <span class="mr-2">@NextTitle</span>
                <svg class="w-5 ml-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                </svg>
            </div>
        </a>
    }
</div>

@code {
    [Parameter] public string? PreviousTitle { get; set; }
    [Parameter] public string? PreviousLink { get; set; }
    [Parameter] public string? NextTitle { get; set; }
    [Parameter] public string? NextLink { get; set; }
}